<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta charset="utf-8" name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
	<style type="text/css">
	*{margin: 0;padding: 0;list-style: none;}
	.box{
		width: 60px;height: 60px;position: absolute;
		transform: rotate(0deg);
	}
	.div1{
		background: red;
		top: 100px;left:50px;
	}
</style>
</head>
<body>
	<div class="div1 box"></div>
	<script type="text/javascript">
		window.onload=function(){
			let box=document.querySelector('.box');
			let old_ang=0;
			box.addEventListener('touchstart',ev=>{
					let a=ev.targetTouches[0].clientX-ev.targetTouches[1].clientX;
					let b=ev.targetTouches[0].clientY-ev.targetTouches[1].clientY;
						// let ang=Math.atan(a/b);
						let ang=Math.atan2(b,a)*180/Math.PI;
						let startAng=old_ang;
						ev.preventDefault();
						function fnmove(ev){
							let a=ev.targetTouches[0].clientX-ev.targetTouches[1].clientX;
							let b=ev.targetTouches[0].clientY-ev.targetTouches[1].clientY;
						// let ang=Math.atan(a/b);
						let ang2=Math.atan2(b,a)*180/Math.PI;
						old_ang=startAng+ang2-ang;
							box.style.transform=`rotate(${old_ang}deg)`;
						ev.preventDefault();//放在move里面用
					}
					function fnend(){
						box.removeEventListener('touchmove',fnmove,false)
						box.removeEventListener('touchend',fnend,false)
					}
					box.addEventListener('touchmove',fnmove,false)
					box.addEventListener('touchend',fnend,false)
				},false);
		};	
	</script>
</body>
</html>